<!-- 二次封装的搜索框，适应不同页面的 UI 需求 -->
<script setup lang="ts">
const props = defineProps<{
  scene: 'chooseLocation' | 'changeCity'
  placeholder: string
  value: string
}>()

defineEmits(['change', 'cancel'])

const backgroundColor = computed(() => {
  if (props.scene === 'chooseLocation')
    return '#F1F1F1'
  else if (props.scene === 'changeCity')
    return 'white'
})

const height = computed(() => {
  if (props.scene === 'chooseLocation')
    return '78rpx'
  else if (props.scene === 'changeCity')
    return '74rpx'
})

const actionStyle = {
  color: '#333333',
  fontWeight: '500',
  fontSize: '28rpx',
  lineHeight: '28rpx',
}

const boxStyle = {
  borderRadius: props.scene === 'chooseLocation' ? '20rpx' : '9999rpx',
}
</script>

<template>
  <uv-search
    :value="value"
    :bg-color="backgroundColor"
    :focus="true"
    :show-action="scene === 'chooseLocation'"
    :action-style="actionStyle"
    action-text="取消"
    :placeholder="placeholder"
    placeholder-color="#999999"
    :height="height"
    :box-style="boxStyle"
    @change="(e: any) => $emit('change', e)"
    @custom="$emit('cancel')"
  >
    <template #prefix>
      <slot name="prefix" />
    </template>
  </uv-search>
</template>
